<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>蓝领安装订单管理系统</title>
<link href="${ctx}/static/css/base.css" rel="stylesheet">
<link href="${ctx}/static/css/platform.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/static/css/uimaker/easyui.css">
</head>
<body>
	<div class="container">
		<div id="pf-hd">
			<div class="pf-logo">
				<img src="${ctx}/static/images/main/main_logo.png" alt="logo">
			</div>

			<div class="pf-user">
				<div class="pf-user-photo">
					<img src="${ctx}/static/images/main/user.png" alt="">
				</div>
				<h4 class="pf-user-name ellipsis">
					<shiro:principal property="name"></shiro:principal>
				</h4>
				<i class="iconfont xiala">&#xe607;</i>

				<div class="pf-user-panel">
					<ul class="pf-user-opt">
						<li><a href="javascript:;"> <i class="iconfont">&#xe60d;</i>
								<span class="pf-opt-name">用户信息</span>
						</a></li>
						<li class="pf-modify-pwd"><a href="javascript:alert('暂未实现，如修改密码，请联系管理员！');">
								<i class="iconfont">&#xe634;</i> <span class="pf-opt-name">修改密码</span>
						</a></li>
						<li class="pf-logout"><a href="${ctx}/logout"> <i
								class="iconfont">&#xe60e;</i> <span class="pf-opt-name">退出</span>
						</a></li>
					</ul>
				</div>
			</div>

		</div>

		<div id="pf-bd">
			<div id="pf-sider">
				<h2 class="pf-model-name">
					<span class="iconfont">&#xe64a;</span> <span class="pf-name">系统菜单</span>
					<span class="toggle-icon"></span>
				</h2>

				<ul class="sider-nav">
					<li class="current"><a href="javascript:;"> <span
							class="iconfont sider-nav-icon">&#xe61e;</span> <span
							class="sider-nav-title" onclick="openTab('.easyui-tabs1','工单','${ctx}/order/list')">工单</span> <i class="iconfont">&#xe642;</i>
					</a>
					</li>
					<li><a href="javascript:;"> <span
							class="iconfont sider-nav-icon">&#xe6c2;</span> <span
							class="sider-nav-title" onclick="openTab('.easyui-tabs1','派单','${ctx}/order/pdlist')">派单</span> <i class="iconfont">&#xe642;</i>
					</a>
						</li>
					<li><a href="javascript:;"> <span
							class="iconfont sider-nav-icon">&#xe6ab;</span> <span
							class="sider-nav-title" onclick="openTab('.easyui-tabs1','核销','http://www.baidu.com')">核销</span> <i class="iconfont">&#xe642;</i>
					</a>
					</li>
				</ul>
			</div>

			<div id="pf-page">
				<div class="easyui-tabs1" style="width: 100%; height: 100%;">
					<div title="首页" style="padding: 10px 5px 5px 10px;">
						<iframe class="page-iframe" src="${ctx}/workbench" frameborder="no"
							border="no" height="100%" width="100%" scrolling="auto"></iframe>
					</div>
				</div>
			</div>
		</div>

		<!-- <div id="pf-ft">
			<div class="system-name">
				<i class="iconfont">&#xe6fe;</i> <span>信息管理系统&nbsp;v1.0</span>
			</div>
			<div class="copyright-name">
				<span>CopyRight&nbsp;2016&nbsp;&nbsp;uimaker.com&nbsp;版权所有</span> <i
					class="iconfont">&#xe6ff;</i>
			</div>
		</div> -->
	</div>

	<script type="text/javascript" src="${ctx}/static/js/jquery.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/menu.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/main.js"></script>
	<!--[if IE 7]>
      <script type="text/javascript">
        $(window).resize(function(){
          $('#pf-bd').height($(window).height()-76);
        }).resize();
        
      </script>
    <![endif]-->
	<script type="text/javascript">
    $('.easyui-tabs1').tabs({
      tabHeight: 44,
      onSelect:function(title,index){
        var currentTab = $('.easyui-tabs1').tabs("getSelected");
        if(currentTab.find("iframe") && currentTab.find("iframe").size()){
            currentTab.find("iframe").attr("src",currentTab.find("iframe").attr("src"));
        }
      }
    })
    $(window).resize(function(){
          $('.tabs-panels').height($("#pf-page").height()-46);
          $('.panel-body').height($("#pf-page").height()-76)
    }).resize();

    var page = 0,
        pages = ($('.pf-nav').height() / 70) - 1;

    if(pages === 0){
      $('.pf-nav-prev,.pf-nav-next').hide();
    }
    $(document).on('click', '.pf-nav-prev,.pf-nav-next', function(){


      if($(this).hasClass('disabled')) return;
      if($(this).hasClass('pf-nav-next')){
        page++;
        $('.pf-nav').stop().animate({'margin-top': -70*page}, 200);
        if(page == pages){
          $(this).addClass('disabled');
          $('.pf-nav-prev').removeClass('disabled');
        }else{
          $('.pf-nav-prev').removeClass('disabled');
        }
        
      }else{
        page--;
        $('.pf-nav').stop().animate({'margin-top': -70*page}, 200);
        if(page == 0){
          $(this).addClass('disabled');
          $('.pf-nav-next').removeClass('disabled');
        }else{
          $('.pf-nav-next').removeClass('disabled');
        }
        
      }
    })
	

	//点击左边菜单，在右侧TAB组件以iframe的方式打开href连接。
	//调用方式参考本页182,183行。
	function openTab(selector,title,href){
    var e = $(selector).tabs('exists',title);
    if(e){
        $(selector).tabs('select',title);
        var tab = $(selector).tabs('getSelected');
        $(selector).tabs('update',{
            tab:tab,
            options:{
                title:title,
                content:'<iframe name="indextab" scrolling="auto" src="'+href+'" frameborder="0" style="width:100%;height:100%;"></iframe>',
                closable:true,
                selected:true
            }
        });
    }else{
        $(selector).tabs('add',{
            title:title,
            content:'<iframe name="indextab" scrolling="auto" src="'+href+'" frameborder="0" style="width:100%;height:100%;"></iframe>',
            iconCls:'',
            closable:true
        });
    }
	//$(".sider-nav-s li").removeClass("active");
	//console.log($(this).parent());
	//$("a").parent().addClass("active");
}

    // setTimeout(function(){
    //    $('.tabs-panels').height($("#pf-page").height()-46);
    //    $('.panel-body').height($("#pf-page").height()-76)
    // }, 200)
    </script>
</body>
</html>